<template>
  <el-dialog
    title="选择通知角色"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="600px"
    @close="$emit('closeRole', selection)"
  >
    <avue-crud
      ref="crud"
      v-model="form"
      style="margin-top: -50px"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @search-reset="onSearchReset"
      @row-save="onRowSave"
      @row-update="onRowUpdate"
      @row-del="onRowDelete"
      @refresh-change="onRefresh"
      @selection-change="onSelectionChange"
    >
    </avue-crud>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="$emit('closeRole', [])">取 消</el-button>
      <el-button size="small" type="primary" @click="$emit('closeRole', selection)">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { requestRoleList } from '@/api'
import ListMixin from '@/utils/mixins/list-mixin'

export default {
  name: 'RoleDialog',
  components: {},
  mixins: [ListMixin],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    roleData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      listApi: requestRoleList,
      tableOption: {
        menuWidth: 280,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        filterBtn: false,
        selectable: this.selectable,
        menu: false,
        column: [
          {
            label: '角色名称',
            prop: 'roleName',
            search: false,
            maxlength: 50,
            rules: [
              { required: true, message: '请输入角色名称' },
              { max: 50, message: '最多50个字' },
            ],
            span: 24,
            align: 'left',
            overHidden: true,
            showWordLimit: true,
          },
          {
            label: '角色编码',
            prop: 'roleCode',
            search: false,
            maxlength: 32,
            showWordLimit: true,
            rules: [{ required: true, message: '请输入角色编码' }],
            span: 24,
            align: 'left',
            overHidden: true,
          },
        ],
      },
    }
  },
  created() {
    // this.selection = this.roleData
  },
  methods: {
    selectable(row) {
      return !this.roleData.some((item) => item.id === row.id || Number(item.roleId) === row.id)
    },
    loadListData() {
      return requestRoleList({})
        .then((res) => {
          this.tableData = res.data
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: res.message,
          })
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
  },
}
</script>

<style scoped lang="scss"></style>
